<template>
 <div>
   <h1 style="text-align: center;font-weight: 550">库存列表</h1>
   <div @click="toInfo" @dblclick="dbclick" class="table-demo-wrapper" style="cursor: pointer">
     <ul class="table-header">
       <li>
         <span>序号</span>
         <span>物料名称</span>
         <span>物料编号</span>
         <span>规格型号</span>
         <span>可用数量</span>
         <span>锁账数量</span>
         <span>物料单位</span>
         <span>库位编码</span>
         <span>入库时间</span>
         <span>制造商名称</span>
       </li>
     </ul>
     <vueSeamlessScroll :data="source" class="seamless-warp" :class-option="optionSingleHeightTime">
       <ul
         class="list"
         :style="'height:'+source.length*38+'px;'"
         @mousemove="stopScroll"
         @mouseout="doScroll"
       >
         <li
           :class="{devicelistitem: true, even: (index + 1) % 2 !== 0}"
           v-for="(item,index) in source"
           :key="index"
         >
           <span :title="item.index">{{index+1}}</span>
           <span :title="item.itemName">{{item.itemName}}</span>
           <span :title="item.itemCode">{{item.itemCode}}</span>
           <span :title="item.spec">{{item.spec}}</span>
           <span :title="item.kyNum">{{item.kyNum}}</span>
           <span :title="item.lockNum">{{item.lockNum}}</span>
           <span :title="item.unit">{{item.unit}}</span>
           <span :title="item.kuweiCode">{{item.kuweiCode}}</span>
           <span :title="item.rukuDate">{{item.rukuDate}}</span>
           <span :title="item.makerName">{{item.makerName}}</span>
         </li>
       </ul>
     </vueSeamlessScroll>
   </div>
 </div>
</template>

<script>
  import { mainListRukuInfo } from "@/api/business/rukuInfo";
  import { listCcStockInfo, getCcStockInfo, delCcStockInfo, addCcStockInfo, updateCcStockInfo } from "@/api/business/ccStockInfo";
  import vueSeamlessScroll from "vue-seamless-scroll";
    export default {
      components: {
        vueSeamlessScroll,
      },
        name: "qjList",
        data() {
          return {
            source: [],
            allowScroll: true,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 9999,
              queryParam1: '2',
              queryParam2: '2',
              queryParam3: '0',
            },
          }
        },
        computed: {
          optionSingleHeightTime() {
            return {
              singleHeight: 38,
              waitTime: 300,
              limitMoveNum: this.source ? this.source.length : 5,
            };
          },
        },
      // created() {
      //   mainListRukuInfo().then(res=>{
      //     console.log(res)
      //     this.source = res.rows
      //   })
      // },
      mounted() {
        this.initData();
      },
      methods: {
        toInfo(){
          let that = this
          // 开启延时器，200ms的间隔用来区分单击和双击，解决双击时执行两次单击事件
          clearTimeout(that.time)
          that.time = setTimeout(() => {
            this.$router.push('psplan/qjdh')
          },200)

        },
        dbclick() {
          clearTimeout(this.time)
          // 双击事件 不写不执行，禁用
        },
        initData() {
          listCcStockInfo(this.queryParams).then(res=>{
            this.source = res.rows;
          })
          // this.source = [];
          // for (let i = 0; i < 30; i++) {
          //   this.source.push({
          //     name: `张三${i + 1}`,
          //     sex: "男",
          //     age: i + 1,
          //     address: "中国大陆浙江省杭州市西湖区",
          //   });
          // }
        },
        stopScroll() {
          this.allowScroll = false;
        },
        doScroll() {
          this.allowScroll = true;
        },
      },

    }
</script>

<style lang="scss" scoped>
  .table-demo-wrapper {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    padding: 10px 26px 0;
    overflow: hidden;
    background: #28b0de;
    .table-header {
      margin-top: 5px;
      li {
        height: 38px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 10px;
        span {
          line-height: 40px;
          flex: 1;
          font-size: 14px;
          font-family: FZZhengHeiS-M-GB;
          font-weight: 400;
          color: #fff;
          text-align: center;
          &:nth-child(2) {
            flex: 2;
          }
          &:nth-child(4) {
            flex: 2;
            text-align: center;
          }
          &:nth-child(5) {
            flex: 2;
            text-align: center;
          }
          &:nth-child(6) {
            flex: 2;
            text-align: center;
          }
        }
      }
    }
    .seamless-warp {
      overflow: hidden;
      .list {
        overflow: hidden;
        .devicelistitem {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 38px;
          padding-left: 10px;
          span {
            flex: 1;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #d7def5;
            text-align: center;
            &:nth-child(2) {
              flex: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(5) {
              flex: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(6) {
              flex: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(4) {
              flex: 2;
              text-align: center;
            }
          }
        }
        .even {
          background: linear-gradient(
              180deg,
              rgba(85, 109, 255, 0.3),
              rgba(45, 67, 139, 0.3),
              rgba(85, 109, 255, 0.3)
          );
        }
      }
    }
  }
</style>
